<template>
  <div>
    <van-nav-bar fixed title="个人设置" left-arrow @click-left="back" />
    <div class="has-top ">
      <van-cell-group class="mtb-20 mlr-25 br-8 ofh">
        <van-cell title="头像" is-link>
          <template>
            <van-uploader :after-read="headAfterRead">
              <headPortrait-box
                class="br-full mr-30 dib  is-90"
                :head-portrait-url="newModel.Image"
              />
            </van-uploader>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group class="mtb-20 mlr-25 br-8 ofh input-box">
        <van-cell title="用户名" :value="newModel.UserName" class="pr-100">
          <!-- <template>
            <input v-model="model.UserName" class="pr-30 fs-32" type="text">
          </template> -->
        </van-cell>
        <van-cell title="昵称" is-link class="nickName">
          <template>
            <input v-model="newModel.NickName" class="pr-30 fs-32" type="text">
          </template>
        </van-cell>
        <van-cell title="修改密码" is-link @click="changeState(1)" />
      </van-cell-group>
      <van-cell-group v-show="newModel.IsSupplier===1" class="mtb-20 mlr-25 br-8 ofh">
        <van-cell title="供应商门头照" is-link>
          <template>
            <van-uploader :after-read="logoAfterRead">
              <img-box class="img-box mr-30" :img-url="model.Logo" />
              <p class="fs-20 mr-30">建议尺寸4:1</p>
            </van-uploader>
          </template>
        </van-cell>
      </van-cell-group>
      <!-- <van-cell-group class="mtb-20 mlr-25 br-8 ofh input-box" @click="changeState(2)">
        <van-cell title="退出登录" is-link />
      </van-cell-group> -->
      <div class="mt-70 mlr-25">
        <p class="btn-large solid-btn " @click="SavePurchaseMember">保存</p>
      </div>

      <div class="mt-30 mlr-25">
        <p class="btn-large hollow-btn " @click="changeState(2)">退出登录</p>
      </div>
      <!-- 确认退出弹窗 -->
      <van-popup v-model="dialogShow" position="bottom" class="bottom-popup">
        <div v-if="state===1" class="popup-box">
          <changePassword :model="newModel" @back="dialogShow=false" @save="changeSuccess" />
        </div>
        <div v-if="state===2">
          <p class="tac fs-28 pt-40 color-black">确认退出当前账户</p>
          <div class="flex-sa-c pt-60 pb-70">
            <span class="hollow-btn-current color-dark btn-middle" @click="dialogShow=false">取消</span>
            <span class="hollow-btn-current color-danger btn-middle" @click="confirm">退出登录</span>
          </div>
        </div>
        <div v-if="state===3">
          <p class="tac fs-28 pt-40 color-black">个人信息有修改，是否保存</p>
          <div class="flex-sa-c pt-60 pb-70">
            <span class="hollow-btn-current color-dark btn-middle" @click="cancle">不保存</span>
            <span class="hollow-btn-current color-danger btn-middle" @click="SavePurchaseMember">保存</span>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import headPortraitBox from 'components/headPortraitBox'
import imgBox from 'components/imgBox'
import changePassword from 'components/purchase/changePassword'
import { upLoad } from 'api/upload'
import { SavePurchaseMember } from 'api/purchase'
import cookies from 'vue-cookies'
export default {
  name: 'Setting',
  components: { headPortraitBox, imgBox, changePassword },
  props: {
    model: { // 数据
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      dialogShow: false,
      state: 0,
      newModel: {}
    }
  },
  computed: {},
  watch: {
    model(newVal, oldVal) {
      this.newModel = JSON.parse(JSON.stringify(newVal))
    }
  },
  created() {
  },
  mounted() {
    this.newModel = JSON.parse(JSON.stringify(this.model))
  },

  methods: {
    back() {
      if (this.isChange()) {
        this.changeState(3)
      } else {
        this.$emit('back')
      }
    },
    cancle() {
      this.newModel = JSON.parse(JSON.stringify(this.model))
      this.dialogShow = false
      this.$emit('back')
    },
    changeState(val) {
      this.state = val
      this.dialogShow = true
    },
    isChange() {
      const _oldVal = this.model
      const _newVal = this.newModel
      let isChange = false
      if (_oldVal && _newVal) {
        if (_oldVal.Image !== _newVal.Image || _oldVal.NickName !== _newVal.NickName || _oldVal.Logo !== _newVal.Logo) {
          isChange = true
        }
      }
      return isChange
    },
    confirm() {
      cookies.remove('AccessToken')
      this.$utils.gotoPage(this.$loginUrl)
    },

    changeSuccess() {
      this.dialogShow = false
      this.$emit('back')
    },
    // 头像上传回调
    headAfterRead(file) {
      const _this = this
      if (file) {
        upLoad({
          Content: this.$utils.getCaption(file.content, 'base64,'),
          FileType: this.$utils.getCaption(file.file.type, '/')
        }).then(res => {
          if (res && res.Data) {
            _this.newModel.Image = res.Data.Path
          } else {
            this.$toast.fail('上传图片失败，请重新上传')
          }
        })
      }
    },
    // 门头照上传回调
    logoAfterRead(file) {
      const _this = this
      if (file) {
        upLoad({
          Content: this.$utils.getCaption(file.content, 'base64,'),
          FileType: this.$utils.getCaption(file.file.type, '/')
        }).then(res => {
          if (res && res.Data) {
            _this.newModel.Logo = res.Data.Path
          } else {
            this.$toast.fail('上传图片失败，请重新上传')
          }
        })
      }
    },
    SavePurchaseMember() {
      if (this.isChange()) {
        this.dialogShow = false
        SavePurchaseMember(this.newModel).then(res => {
          if (res) {
            this.$toast.success('保存成功')
            this.$emit('save', this.newModel)
          }
        })
      } else {
        this.dialogShow = false
        this.$toast.success('保存成功')
        this.$emit('save', this.newModel)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.van-tabs__nav {
  background: $colorF5;
  .van-tab {
    font-size: 16px;
    font-weight: bold;
  }
}
/deep/.van-tabs__nav_Fixed {
  background: $colorF;
}
/deep/.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border: none;
}
.solid-btn{
  border-radius: 10px;
}
.hollow-btn{
  border-radius: 10px;
  line-height: 83px;
}
.van-cell{
  align-items: center;
  font-size: 16px;
}
.input-box{
  .van-cell{
    padding-top: 16px;
    padding-bottom: 16px;
  }
}
.van-cell__value{
  text-align: right;
  color:$color3;
  input{
    width: 100%;
    text-align: right;
  }
}
.nickName  .van-cell__value{
  flex:2;
}
.img-box{
  width: 128px;
  height: 32px;
  display: inline-block;
}
.btn-middle{
  width: 220px;
}
.popup-box{
  min-height: 100vh;
   background: $colorF5;
}
</style>
